<!DOCTYPE html>
<html>
<head>
  <title>Infinite Resistor Ladder Network</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    canvas {
      border: 1px solid #ccc;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <canvas id="circuitCanvas" width="800" height="300"></canvas>

  <script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Parameters ---
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1.8;
    ctx.font = 'italic 22px Times New Roman';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    const yTop = 120;
    const yBottom = 190;
    const railHeight = yBottom - yTop;

    const numUnits = 6;
    const unitWidth = 120;
    const startX = (canvas.width - (numUnits - 1) * unitWidth) / 2;

    const resWidthH = 60;  // Horizontal resistor 'r' width
    const resHeightH = 25; // Horizontal resistor 'r' height
    const resWidthV = 25;  // Vertical resistor 'R' width
    const resHeightV = 40; // Vertical resistor 'R' height

    // --- Main Drawing Logic ---

    // Draw the solid part of the bottom rail
    const endX = startX + (numUnits - 1) * unitWidth;
    ctx.beginPath();
    ctx.moveTo(startX, yBottom);
    ctx.lineTo(endX, yBottom);
    ctx.stroke();

    // Draw the repeating units of the ladder network
    for (let i = 0; i < numUnits; i++) {
      const currentX = startX + i * unitWidth;

      // Draw vertical resistor 'R'
      const marginV = (railHeight - resHeightV) / 2;
      ctx.beginPath();
      ctx.moveTo(currentX, yTop);
      ctx.lineTo(currentX, yTop + marginV);
      ctx.stroke();
      
      // The resistor body
      ctx.strokeRect(currentX - resWidthV / 2, yTop + marginV, resWidthV, resHeightV);
      
      ctx.beginPath();
      ctx.moveTo(currentX, yTop + marginV + resHeightV);
      ctx.lineTo(currentX, yBottom);
      ctx.stroke();
      
      // Draw label 'R'
      ctx.fillText('R', currentX - resWidthV / 2 - 20, yTop + railHeight / 2);

      // Draw horizontal resistor 'r' (if not the last unit)
      if (i < numUnits - 1) {
        const nextX = startX + (i + 1) * unitWidth;
        const totalWidthH = nextX - currentX;
        const marginH = (totalWidthH - resWidthH) / 2;

        // Line before resistor
        ctx.beginPath();
        ctx.moveTo(currentX, yTop);
        ctx.lineTo(currentX + marginH, yTop);
        ctx.stroke();
        
        // The resistor body
        ctx.strokeRect(currentX + marginH, yTop - resHeightH / 2, resWidthH, resHeightH);
        
        // Line after resistor
        ctx.beginPath();
        ctx.moveTo(currentX + marginH + resWidthH, yTop);
        ctx.lineTo(nextX, yTop);
        ctx.stroke();
        
        // Draw label 'r'
        ctx.fillText('r', currentX + totalWidthH / 2, yTop - resHeightH / 2 - 12);
      }
    }

    // --- Draw Dashed Lines for Infinity ---
    const dashLength = 60;
    ctx.setLineDash([7, 5]);

    // Left side
    ctx.beginPath();
    ctx.moveTo(startX, yTop);
    ctx.lineTo(startX - dashLength, yTop);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(startX, yBottom);
    ctx.lineTo(startX - dashLength, yBottom);
    ctx.stroke();

    // Right side
    ctx.beginPath();
    ctx.moveTo(endX, yTop);
    ctx.lineTo(endX + dashLength, yTop);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(endX, yBottom);
    ctx.lineTo(endX + dashLength, yBottom);
    ctx.stroke();

  </script>
</body>
</html>